<template>
  <view class="min-h-100vh bg-[#f1f1f1] p-x-[110rpx] p-y-[180rpx] box-border">
    <!-- 导航栏 -->
    <wd-navbar 
      custom-class="navbar-custom" 
      title="考试成绩" 
      :bordered="false" 
      fixed 
      placeholder 
      safeAreaInsetTop
    ></wd-navbar>

    <!-- 成绩卡片 -->
    <view class="bg-[#fff] rounded-[16rpx] overflow-hidden shadow">
      <!-- 完成标题 -->
      <view class="result-header">考试完成</view>

      <!-- 成绩信息 -->
      <view 
        class="py-[40rpx] px-[30rpx] m-l-[100rpx]" 
      >
        <!-- <view class="flex items-center mb-[30rpx]">
          <text class="text-[32rpx] text-[#282828]">正确答题：</text>
          <text class="text-[32rpx] text-[#282828]">{{ correctCount }}/{{ totalCount }}道</text>
        </view> -->
        <view class="flex items-center mb-[30rpx]">
          <text class="text-[32rpx] text-[#282828]">考试分数：</text>
          <text class="text-[32rpx] text-[#282828]">{{ score }}分</text>
        </view>
        <view class="flex items-center">
          <text class="text-[32rpx] text-[#282828]">考试用时：</text>
          <text class="text-[32rpx] text-[#282828]">{{ formatSeconds(duration) }}</text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="px-[30rpx] pt-[20rpx] pb-[40rpx] flex flex-col items-center gap-[20rpx]">
        <wd-button custom-class="result-btn" round @click="handleFinish">
          考试结束!
        </wd-button>
        <wd-button custom-class="result-btn-plain" round @click="handleWrongQuestions">
          进入错题库
        </wd-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { formatSeconds } from '@/utils'

definePage({
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '考试成绩',
  },
})

// 接收页面参数
const score = ref(0) // 考试分数
const duration = ref(0) // 用时（秒）

onLoad((options) => {
  score.value = parseInt(options.score || 0)
  duration.value = parseInt(options.duration || 0)
})

// 返回上一页
// const goBack = () => {
//   uni.navigateBack()
// }

// 考试结束
const handleFinish = () => {
  // uni.showToast({
  //   title: '考试结束',
  //   icon: 'success',
  // })
  setTimeout(() => {
    uni.navigateBack({
      delta: 3
    })
  }, 500)
}

// 进入错题库
const handleWrongQuestions = () => {
  uni.navigateTo({
    url: '/pages-children/wrongQuestionBank/index'
  })
}
</script>

<style lang="scss" scoped>
/* 保留复杂的背景图样式 */
.result-header {
  background-image: url('/static/images/bg0.png');
  background-size: cover;
  background-position: center;
  color: #282828;
  font-size: 36rpx;
  font-weight: 400;
  text-align: center;
  padding: 30rpx;
}
</style>

<style lang="scss">
/* 按钮外部样式类 - 保留背景图等复杂样式 */
.result-btn,
.result-btn-plain {
  width: 360rpx !important;
  height: 64rpx !important;
  background-image: url('/static/images/bg0.png') !important;
  background-size: cover !important;
  background-position: center !important;
  border: none !important;
  color: #282828 !important;
  font-size: 32rpx !important;
  font-weight: 400 !important;
  line-height: 64rpx !important;
}
</style>
